<script>
import Todo from "../components/Todo.vue";
import {
  daysOptions,
  priorityOptions,
  isFinishedOptions,
} from "../components/constant";
export default {
  components: {
    Todo,
  },
  props: {
    todos: Array,
    conditions: Object,
    isEnd: Boolean,
  },
  data() {
    return {
      daysOptions,
      priorityOptions,
      isFinishedOptions,
    };
  },
};
</script>
<template>
  <div>


  <div>
      <ElSelect v-model="conditions.days">
        <ElOption v-for="option in daysOptions" :label="option.label" :value="option.value"></ElOption>
      </ElSelect>
      <ElSelect v-model="conditions.priority">
        <ElOption label="全部" value="all"></ElOption>
        <ElOption v-for="option in priorityOptions" :label="option.label" :value="option.value"></ElOption>
      </ElSelect>
      <ElSelect v-model="conditions.isFinished">
        <ElOption v-for="option in isFinishedOptions" :label="option.label" :value="option.value"></ElOption>
      </ElSelect>
    </div>
    <div>
      <Todo
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @modify-todo="$emit('modify-todo', $event)"
      />
      <el-divider v-show="isEnd"> 我是有底线的！ </el-divider>
    </div>

  </div>
</template>